<template>
  <div class="pay">
    <header>
      <van-sticky>
        <div class="top">
          <van-icon
            name="arrow-left"
            class="arrow_left"
            @click="goBack"
          />
          <span class="sure">确认订单</span>
        </div>
      </van-sticky>
      <p class="where">订单配送至</p>
      <p class="address" @click='addAddress'>
        <span class="selected">{{address===''?'选择收货地址':address}}</span>
        <van-icon
          name="arrow"
          class="arrow"
          v-show="address===''"
        />
      </p>
      <div class="time">
        <div class="time_inner">
          <div class="time_l">
            <p>送达时间</p>
            <p>
              <van-tag type="primary">蜂鸟专送</van-tag>
            </p>
          </div>
          <div class="time_r">
            {{time===''?'请选择送达时间':time}}
            <van-icon
              name="arrow"
              class="arrow2"
              @click="selectTime"
            />
            <van-popup
              v-model="show"
              position="bottom"
              :style="{ height: '50%' }"
            >
              <p class="sel">请选择时间</p>
              <van-datetime-picker
                v-model="currentTime"
                type="time"
                :filter="filter"
                @confirm="confirm"
                @cancel='cancel'
              />
            </van-popup>
          </div>
        </div>
        <p class="pay">
          <span class="txt">支付方式</span>
          <span class="sel">在线支付</span>
        </p>
      </div>

    </header>
    <section>
      <div class="shop">
        <h2>{{name}}</h2>
        <div class="goods">
          <van-card
            v-for="(item,index) in cartList"
            :key="index"
            :num="item.num"
            :price="item.price"
            :title="item.name"
            :thumb="item.src"
          />
        </div>
      </div>
      <div class="num">
        <div class="num_l">
          <van-tag type="primary">蜂鸟</van-tag>
          <span class="money">配送费</span>
        </div>
        <div class="num_r">
          <span class="old"></span>
          <span class="new">¥{{deliveryPrice}}</span>
        </div>
      </div>
      <div class="coupon">
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />

        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px;"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
      <div class="explain">
        <div class="exp_l">优惠说明</div>
        <div class="exp_r">
          <span class="txt">小计</span>
          <span class="total">¥{{total}}</span>
        </div>
      </div>
    </section>
    <van-submit-bar
      :price="total*100"
      button-text="去支付"
      @submit="goConfirm"
    />
  </div>

</template>
<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元"
};
export default {
  data: () => ({
    id: 0,
    name: "",
    cartList: [],
    deliveryPrice: 0,
    total: 0,
    discount: 0,
    chosenCoupon: -1,
    coupons: [coupon],
    disabledCoupons: [coupon],
    showList: false,
    flag: false,
    show: false,
    currentTime: '12:00',
    time:'',
    address:'',
    reload:true
  }),
  created() {
    this.id = Number(this.$route.params.id);
    this.getSellerName();
    this.getCartList();
  },
  methods: {
    goConfirm(){
      if(this.address===''){
        this.$Toast('请填写地址');
        return;
      }
      if(this.time===''){
        this.$Toast('请选择送达时间');
        return;
      }
      this.$router.push('/home/confirm/'+this.id)
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      if (!this.flag) {
        this.discount = 1.5;
        this.total = this.total - 1.5;
        this.flag = true;
      }
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    goBack() {
      this.$router.push('/home/goodinfo/'+this.id);
    },
    async getSellerName() {
      const {
        data: { status, sellers }
      } = await this.$axios.get("api/getdetail/seller");
      console.log(sellers);
      sellers.forEach(item => {
        if (item.id === this.id) {
          this.name = item.seller.name;
          this.deliveryPrice = item.seller.deliveryPrice;
          this.total = this.$store.getters.getTotal + this.deliveryPrice;
          this.address = this.$store.getters.getCurrentAddress;
        }
      });
      // this.$store.dispatch('getCurrentAddress')
    },
    getCartList() {
      let cartList = JSON.parse(localStorage.getItem("cartList") || "[]");
      // console.log(cartList);
      this.cartList = cartList;
    },
    selectTime() {
      this.show = true;
    },
    confirm(val) {
      // console.log(val);
      this.show = false;
      this.time = val;
    },
    cancel() {
      this.show = false;
    },
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    addAddress(){
      this.$router.push('/mine/checkaddress/'+this.id)
    }
  }
};
</script>
<style lang="less" scoped>
.pay {
  header {
    background-color: #2395ff;
    color: white;
    padding-bottom: 10px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 147px 10px 10px;
      box-sizing: border-box;
      color: white;
      font-size: 25px;
      border-bottom: 1px solid #fff;
      z-index: 999;
      background-color: #2395ff;
      .arrow_left {
        font-size: 20px;
      }
      .sure {
        font-weight: 1000;
        text-align: center;
      }
    }
    .where {
      box-sizing: border-box;
      padding-left: 15px;
      font-size: 20px;
      margin: 3px 0;
    }
    .address {
      font-size: 25px;
      box-sizing: border-box;
      padding-left: 15px;
      display: flex;
      align-items: center;
      margin: 5px 0 10px 0;
      .selected {
        margin-right: 16px;
        font-size:16px;
      }
      .arrow {
        font-size: 20px;
      }
    }
    .time {
      width: 90%;
      background-color: #fff;
      margin: 0 auto;
      color: black;
      box-sizing: border-box;
      padding: 10px;
      .time_inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        .time_l {
        }
        .time_r {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          color: #999;
          .sel {
            text-align: center;
            font-size: 14px;
            color: #2395ff;
          }
          .arrow2 {
            margin-left: 10px;
          }
        }
      }
      .pay {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .txt {
        }
        .sel {
          color: #2395ff;
        }
      }
    }
  }
  section {
    padding-bottom: 50px;
    .shop {
      width: 90%;
      margin: 0 auto;
      background-color: #fafafa;
      padding-bottom: 10px;
      h2 {
        font-size: 16px;
        padding-left: 15px;
      }
      .goods {
        .van-card__content {
          justify-content: flex-start;
          .van-card__title {
            margin-top: 10px;
          }
          .van-card__bottom {
            margin-top: 10px;
            .van-card__price {
              color: #ee0a24;
            }
          }
        }
      }
    }
    .num {
      width: 90%;
      margin: 25px auto;
      background-color: #fafafa;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      .num_l {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .money {
          margin-left: 10px;
        }
      }
      .num_r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .old {
          color: #999;
          margin-right: 10px;
          text-decoration: line-through;
        }
        .new {
        }
      }
    }
    /deep/.coupon {
      /deep/.van-cell {
        /deep/.van-cell__value {
          color: #ff3c15;
        }
        /deep/.van-popup {
          padding-top: 0;
          border-radius: 0;
        }
        /deep/.van-button {
          /deep/.van-button__text {
            font-size: 12px;
            padding: 6px 8px;
            background-color: #ee0a24 !important;
            color: white !important;
          }
        }
      }
    }
    .explain {
      width: 90%;
      margin: 30px auto;
      background-color: #fafafa;
      box-sizing: border-box;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #999;
      .exp_l {
      }
      .exp_r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .txt {
        }
        .total {
          font-size: 18px;
          color: black;
          margin-left: 10px;
        }
      }
    }
  }
  .van-submit-bar {
    background-color: rgba(0, 0, 0, 0.6);
    .van-submit-bar__text {
      color: white;
    }
    .van-submit-bar__bar {
      padding: 0;
      button {
        height: 100%;
        border-radius: 0;
        font-size: 16px;
      }
    }
  }
}
</style>